<script setup>
import useDataStore from '~/src/store';
import { storeToRefs } from 'pinia';
import { onMounted, ref } from 'vue';
import { getGoodsListAPI } from '../../apis/goods';
import { getBannerAPI } from '../../apis/home';
import { useRouter } from 'vue-router';

defineOptions({
    name: 'shop'
})

const router = useRouter()

const dataStore = useDataStore()
const { userInfo, isMobile } = storeToRefs(dataStore)

// 侧边菜单
let asideMenu = ref([
    { id: 'recommend', name: '推荐列表' },
    { id: 'car', name: '购物车' },
    { id: 'wish', name: '心愿清单' },
    { id: 'trade', name: '交易记录' },
])
let goodsList = ref([]) //商品列表
let goodsBannerList = ref([])   //商品banner


onMounted(() => {
    getGoodsList()
    getBanner()
})

// 获取商品列表
const getGoodsList = async () => {
    let res = await getGoodsListAPI()
    if (res.code === 200) {
        res.data.forEach(item => {
            let imgArr = item.goods_img.split(',')
            item.imgArr = imgArr
        })
        goodsList.value = res.data
        console.log(goodsList.value);
    }
}

// 获取banner列表
const getBanner = async () => {
    let res = await getBannerAPI()
    if (res.code === 200) {
        goodsBannerList.value = res.data
    }

}

// 跳转到详情 
const toGoodsDetail = (goodsId) => {
    router.push({ name: 'shopDetail', query: { goodsId } })
}

</script>

<template>
    <div class="page">
        <div class="container">
            <div class="temp" v-show="!isMobile"></div>
            <div class="main">
                <div class="main-banner"></div>
                <div class="main-mid">
                    <div class="mid-aside">
                        <div class="aside-avatar"><img :src="userInfo.user_avatar" alt=""></div>
                        <div class="aside-menu">
                            <div class="menu-item" v-for="item in asideMenu" :key="item.id">{{ item.name }}</div>
                        </div>
                    </div>
                    <div class="mid-content">
                        <div class="content-banner">
                            <el-carousel ref="bannerWrap" type="card" arrow="always"
                                :trigger="isMobile ? 'click' : 'hover'" :arrow="isMobile ? 'always' : 'never'"
                                :interval="3000" :autoplay="true" :cardScale="0.9">
                                <el-carousel-item v-for="item in goodsBannerList" :key="item.banner_id"
                                    :name="item.banner_id + ''">
                                    <div>
                                        <div class="img-text">{{ item.banner_text }}</div>
                                        <img :src="item.banner_path" alt="">
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="content-activity">
                            <div class="activity-item" style="margin-right: 5px;">
                                <div class="activity-text">Welcome to shoesDog.com</div>
                                <div class="activity-btn"><el-button plain round>查看详情</el-button></div>
                            </div>
                            <div class="activity-item" style="margin-left: 5px;">
                                <div class="activity-text">Welcome to shoesDog.com</div>
                                <div class="activity-btn"><el-button plain round>查看详情</el-button></div>
                            </div>
                        </div>
                        <div class="content-goods">
                            <div class="goods-item" v-for="item in goodsList" :key="item.goods_id"
                                @click="toGoodsDetail(item.goods_id)">
                                <div class="goods-img"><img :src="item.imgArr[0]" alt=""></div>
                                <div class="goods-name">{{ item.goods_name }}</div>
                                <div class="goods-price">
                                    <div class="price">￥ <span>{{ item.goods_price }}</span> </div>
                                    <div class="sales">{{ item.goods_sales }}人付款</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='scss'>
@import url(./shop.scss);
</style>